<template>
  <div class="sales-page">
    <div class="mode-title mode-title-mobile">
      <span class="text">{{ $t('pages.discount') }}</span>
      <div class="line"></div>
    </div>
    <div class="banner flexbox flex-align-center flex-justify-center">
      <div class="middle-box">
        <img
          loading="lazy"
          class="title"
          src="https://cd.sealmg.com/assets/img/sales/title-img.png"
          alt="Sales promotion title"
          title="Special discount title"
          srcset=""
        />
        <div class="desc flexbox flex-align-center">
          <span class="text">UP TO 60% OFF</span>
          <img
            loading="lazy"
            class="triangle"
            src="https://cd.sealmg.com/assets/img/sales/triangle-img.png"
            alt="Decorative triangle"
            title="Triangle decoration"
          />
        </div>
        <img
          loading="lazy"
          class="rate"
          src="https://cd.sealmg.com/assets/img/sales/rate-img.png"
          alt="Discount rate banner"
          title="Discount percentage"
        />
        <img
          loading="lazy"
          class="car"
          src="https://cd.sealmg.com/assets/img/sales/shop-car-img.png"
          alt="Shopping cart illustration"
          title="Shopping cart graphic"
        />
      </div>
    </div>
    <div class="box-center !z-[-100] max-w-7xl mx-auto">
      <div class="mode-title mode-title-pc">
        <h1 class="text capitalize">{{ $t('pages.discount') }}</h1>
        <div class="line"></div>
      </div>
      <div class="list flexbox flex-wrap">
        <nuxt-link class="item !flex !flex-col" v-for="item in saleList" :key="item.id" :to="localePath(`/product/${item.code}`)">
          <div
            class="bg bg-center bg-no-repeat bg-cover border-[#FFFFFF] border-2 !z-0"
            :style="'background-image: url(' + $globalFn.imgPrefixUrl(item.image) + ')'"
            alt=""
            srcset=""
          />
          <div class="base flexbox flex-align-center">
            <div class="img overflow-hidden border">
              <img
                loading="lazy"
                :src="$globalFn.imgPrefixUrl(item.image, 'goods_thumb_1_1')"
                :title="`${item.goods_name}`"
                :alt="`${item.goods_name}`"
                srcset=""
                class="size-full object-cover"
              />
            </div>
            <div class="info flex-1">
              <div class="name one-line">{{ item.goods_name }}</div>
              <div class="desc one-line" v-if="item.sku && item.sku.length">
                {{ item.sku[0].title }}
              </div>
            </div>
          </div>
          <div class="bottom flexbox flex-align-center flex-justify-between !flex-grow">
            <span class="rate" v-if="item.sku && item.sku.length && item.sku[0].discount > 0">- {{ item.sku[0].discount || 0 }}% </span>
            <div class="price">
              <span v-if="item.sku && item.sku.length">
                {{ item.sku[0].currency_symbol }}
              </span>
              <span v-if="item.sku && item.sku.length">
                {{ item.sku[0].price_text }}
              </span>
            </div>
          </div>
        </nuxt-link>
        <div class="flex justify-center w-full">
          <Paging :total="total" :page.sync="page" :limit.sync="limit" @change="handlePageChange" :current-query="$route.query"> </Paging>
        </div>
        <!-- <no-data v-if="saleList.length == 0" :loading="loading"></no-data> -->
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    layout: 'newsHome',
    name: 'discountList',
    key(route) {
      return route.fullPath
    },
    data: function () {
      return {
        page: 1, // 当前页码
        limit: 24, // 每页显示的数据条数
        saleList: [], // 商品列表数据
        loading: true, // 加载状态
        total: 0 // 总数据条数
      }
    },
    head() {
      return {
        title: 'Limited Time Discount on SEALMG | Up to 60% Off',
        meta: [
          {
            hid: 'description',
            name: 'description',
            content:
              'Explore exclusive discount for gift cards, game CD keys, and vouchers at SEALMG. Save more on your favorite gaming platforms with our limited-time offers!'
          }
        ]
      }
    },
    created() {},
    async asyncData({ app, query }) {
      const res = await app.$axios.get('/api/goods/index', {
        params: {
          discount: 1,
          page: query.page || 1,
          limit: 24,
          paginate: 1
        }
      })
      return {
        saleList: res?.data || [],
        total: res?.total || 0,
        loading: false,
        page: query.page || 1
      }
    },
    methods: {
      // 处理页码变化
      async handlePageChange({ page, currentQuery }) {
        this.page = currentQuery || page
        const newQuery = { ...this.$route.query, page: page }
        const newPath = this.$route.path + '?' + new URLSearchParams(newQuery).toString()
        window.history.replaceState({}, '', newPath)
        await this.getSaleList()
      },
      //  获取折扣商品列表
      async getSaleList() {
        try {
          this.loading = true
          const params = {
            page: this.page,
            limit: this.limit,
            paginate: 1,
            discount: 1
          }
          const res = await this.$axios.get('/api/goods/index', { params })
          this.total = res.total || 0
          if (res?.data) {
            this.saleList = res.data
          }
        } catch (err) {
          console.error('获取折扣商品列表失败:', err)
        } finally {
          this.loading = false
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  /deep/ .el-input .el-input__inner {
    height: auto !important;
  }
  .mode-title {
    padding: 20px 24px 11px 24px;
    .line {
      margin-top: 8px;
      width: 100%;
      height: 1px;
      background: @color-f0;
    }
    .text {
      font-weight: 500;
      font-size: 22px;
      color: @font-color-14;
    }
  }
  .mode-title-pc {
    display: block;
  }
  .mode-title-mobile {
    display: none;
  }
  .sales-page {
    .banner {
      height: 172px;
      background: #fd6842;
      .middle-box {
        position: relative;
        width: 1200px;
        height: 172px;
        margin: 0 auto;
        .title {
          position: absolute;
          top: 42px;
          left: 22px;
          width: 219px;
          height: 48.5px;
        }
        .desc {
          position: absolute;
          padding-left: 16px;
          padding-right: 28px;
          bottom: 18px;
          left: 26px;
          height: 48px;
          background: @font-color-26;
          .text {
            font-family: qiantuhouheiti;
            font-size: 32px;
            color: @color-ff;
            line-height: 38px;
          }
          .triangle {
            position: absolute;
            right: -1px;
            top: 0;
            width: 28px;
            height: 48px;
            z-index: 2;
          }
        }
        .car {
          position: absolute;
          right: 137px;
          bottom: 0;
          width: 180px;
          height: 149px;
          z-index: 2;
        }
        .rate {
          position: absolute;
          right: -60px;
          bottom: 0;
          width: 597px;
          height: 172px;
        }
      }
    }
    .box-center {
      width: 1200px;
      margin: 0 auto;
      margin-top: 20px;
      .list {
        margin-top: 8px;
        .item {
          box-sizing: border-box;
          position: relative;
          width: 285px;
          height: 133px;
          margin-left: 20px;
          margin-bottom: 32px;
          border-radius: 16px;
          cursor: pointer;
          overflow: hidden;
          // border: 10px solid #fff;
          // z-index: 30;
        }
        .item:nth-child(4n + 1) {
          margin-left: 0;
        }
        .bg {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: -1;
          overflow: hidden;
          border-radius: 16px;
        }
        .base {
          box-sizing: border-box;
          width: 100%;
          padding: 16px;
          height: 85px;
          border-radius: 16px 16px 0 0;
          background: rgba(255, 255, 255, 0.85);
          // border-radius: 16px 16px 0px 0px;
          backdrop-filter: blur(40px);
          .img {
            box-sizing: border-box;
            width: 56px;
            height: 56px;
            border-radius: 16px;
            // border: @border-1-f7;
          }
          .info {
            margin-left: 10px;
            width: 180px;
            .name {
              font-weight: 600;
              font-size: 14px;
              color: @font-color-14;
            }
            .desc {
              margin-top: 4px;
              font-size: 12px;
              color: @font-color-66;
            }
          }
        }
        .bottom {
          padding: 0 16px;
          height: 100%;
          // background: @color-ff;
          // border-radius: 0px 0px 16px 16px;
          background: @color-f7;
          backdrop-filter: blur(40px);
          .rate {
            padding: 0 7px;
            height: 24px;
            line-height: 24px;
            font-weight: 500;
            font-size: 12px;
            color: @theme-color;
            background: #ffe8de;
            border-radius: 6px;
          }
          .price {
            font-family: HelveticaNeue, HelveticaNeue;
            font-weight: bold;
            font-size: 14px;
            color: @font-color-26;
          }
        }
      }
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .mode-title {
      padding: 16px 16px 8px 16px;
      .line {
        margin-top: 8px;
        width: 100%;
        height: 1px;
        background: @color-f0;
      }
      .text {
        font-weight: 500;
        font-size: 20px;
        color: @font-color-14;
      }
    }
    .mode-title-pc {
      display: none;
    }
    .mode-title-mobile {
      display: block;
    }
    .sales-page {
      margin: 0 auto;
      width: 768px;
      .banner {
        height: 70px;
        background: #fd6842;
        .middle-box {
          position: relative;
          height: 70px;
          .title {
            position: absolute;
            top: 16px;
            left: 16px;
            width: 79px;
            height: 20px;
          }
          .desc {
            position: absolute;
            padding-left: 16px;
            padding-right: 28px;
            bottom: 10px;
            left: 16px;
            height: 19px;
            background: @font-color-26;
            .text {
              font-family: qiantuhouheiti;
              font-size: 14px;
              color: @color-ff;
              line-height: 17px;
            }
            .triangle {
              position: absolute;
              right: -1px;
              top: 0;
              width: 14px;
              height: 19px;
              z-index: 2;
            }
          }
          .car {
            position: absolute;
            right: 64px;
            bottom: 0;
            width: 72px;
            height: 60px;
            z-index: 2;
          }
          .rate {
            position: absolute;
            right: 0px;
            bottom: 0;
            width: 202px;
            height: 70px;
          }
        }
      }
      .box-center {
        width: 100%;
        margin: 0 auto;
        margin-top: 16px;
        padding-bottom: 16px;
        .list {
          padding: 0 16px;
          margin-top: 0px;
          .item {
            box-sizing: border-box;
            position: relative;
            width: 100%;
            height: 135px;
            margin-left: 0px;
            margin-bottom: 16px;
            border-radius: 16px;
            cursor: pointer;
            overflow: hidden;
          }
          .item:nth-child(4n + 1) {
            margin-left: 0;
          }
          .bg {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            border-radius: 16px;
          }
          .base {
            box-sizing: border-box;
            width: 100%;
            padding: 0 15px;
            height: 84px;
            background: rgba(255, 255, 255, 0.85);
            // border-radius: 16px 16px 0px 0px;
            backdrop-filter: blur(40px);
            .img {
              width: 56px;
              height: 56px;
              border-radius: 12px;
            }
            .info {
              margin-left: 10px;
              width: 240px !important;
              .name {
                font-weight: 600;
                font-size: 14px;
                color: @font-color-14;
              }
              .desc {
                margin-top: 4px;
                font-size: 12px;
                color: @font-color-66;
                width: auto;
              }
            }
          }
          .bottom {
            padding: 0 16px;
            height: 50px;
            // background: @color-ff;
            // border-radius: 0px 0px 16px 16px;
            background: @color-f7;
            backdrop-filter: blur(40px);
            .rate {
              padding: 0 7px;
              height: 24px;
              line-height: 24px;
              font-weight: 500;
              font-size: 12px;
              // color: @color-ff;
              // background: @theme-color;
              color: @theme-color;
              background: #ffe8de;
              border-radius: 6px;
            }
            .price {
              font-family: HelveticaNeue, HelveticaNeue;
              font-weight: bold;
              font-size: 14px;
              color: @font-color-26;
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    .mode-title {
      padding: 16px 16px 8px 16px;
      .line {
        margin-top: 8px;
        width: 100%;
        height: 1px;
        background: @color-f0;
      }
      .text {
        font-weight: 500;
        font-size: 20px;
        color: @font-color-14;
      }
    }
    .mode-title-pc {
      display: none;
    }
    .mode-title-mobile {
      display: block;
    }
    .sales-page {
      margin: 0 auto;
      width: 375px;
      .banner {
        height: 70px;
        background: #fd6842;
        .middle-box {
          position: relative;
          height: 70px;
          .title {
            position: absolute;
            top: 16px;
            left: 16px;
            width: 79px;
            height: 20px;
          }
          .desc {
            position: absolute;
            padding-left: 16px;
            padding-right: 28px;
            bottom: 10px;
            left: 16px;
            height: 19px;
            background: @font-color-26;
            .text {
              font-family: qiantuhouheiti;
              font-size: 14px;
              color: @color-ff;
              line-height: 17px;
            }
            .triangle {
              position: absolute;
              right: -1px;
              top: 0;
              width: 14px;
              height: 19px;
              z-index: 2;
            }
          }
          .car {
            position: absolute;
            right: 64px;
            bottom: 0;
            width: 72px;
            height: 60px;
            z-index: 2;
          }
          .rate {
            position: absolute;
            right: 0px;
            bottom: 0;
            width: 202px;
            height: 70px;
          }
        }
      }
      .box-center {
        width: 100%;
        margin: 0 auto;
        margin-top: 16px;
        padding-bottom: 16px;
        .list {
          padding: 0 16px;
          margin-top: 0px;
          .item {
            box-sizing: border-box;
            position: relative;
            width: 343px;
            height: 135px;
            margin-left: 0px;
            margin-bottom: 16px;
            border-radius: 16px;
            cursor: pointer;
            overflow: hidden;
          }
          .item:nth-child(4n + 1) {
            margin-left: 0;
          }
          .bg {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
            border-radius: 16px;
          }
          .base {
            box-sizing: border-box;
            width: 100%;
            padding: 0 15px;
            height: 84px;
            background: rgba(255, 255, 255, 0.85);
            // border-radius: 16px 16px 0px 0px;
            backdrop-filter: blur(40px);
            .img {
              width: 56px;
              height: 56px;
              border-radius: 12px;
            }
            .info {
              margin-left: 10px;
              width: 240px !important;
              .name {
                font-weight: 600;
                font-size: 14px;
                color: @font-color-14;
              }
              .desc {
                margin-top: 4px;
                font-size: 12px;
                color: @font-color-66;
                width: auto;
              }
            }
          }
          .bottom {
            padding: 0 16px;
            height: 50px;
            // background: @color-ff;
            // border-radius: 0px 0px 16px 16px;
            background: @color-f7;
            backdrop-filter: blur(40px);
            .rate {
              padding: 0 7px;
              height: 24px;
              line-height: 24px;
              font-weight: 500;
              font-size: 12px;
              // color: @color-ff;
              // background: @theme-color;
              color: @theme-color;
              background: #ffe8de;
              border-radius: 6px;
            }
            .price {
              font-family: HelveticaNeue, HelveticaNeue;
              font-weight: bold;
              font-size: 14px;
              color: @font-color-26;
            }
          }
        }
      }
    }
  }
</style>
